<template>
  <form @submit.prevent="handleSumbit">
    <div class="form-item">
      <label>账号：</label>
      <input type="text" v-model="user.loginId" />
    </div>
    <div class="form-item">
      <label>密码：</label>
      <input type="password" v-model="user.loginPwd" />
    </div>
    <div class="form-item">
      <label></label>
      <button>
        {{ $store.state.loading ? "loading..." : "登录" }}
      </button>
    </div>
  </form>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "../store/useLoginUser";

const user = reactive({
  loginId: "",
  loginPwd: "",
});
const $router = useRouter();
const $store = useStore();
const handleSumbit = async () => {
  $store.login(user.loginId, user.loginPwd);
  if ($store.state.user) {
    $router.push("/");
  } else {
    alert("账号密码错误");
  }
};
</script>

<style scoped>
.form-item {
  margin: 1em auto;
  width: 300px;
  display: flex;
  align-items: center;
}
.form-item input {
  height: 26px;
  font-size: 14px;
  flex: 1 1 auto;
}
.form-item label {
  width: 70px;
}
.form-item button {
  flex: 1 1 auto;
  background: #50936c;
  border: none;
  outline: none;
  color: #fff;
  border-radius: 5px;
  height: 35px;
  font-size: 16px;
}
</style>
